what
本文主要阐述了如何使用dawn快速搭建一个多页面应用。
why
单页有许多优缺点。而我司当前的情况比较适合于使用多页面应用,既提高了开发效率,保证了用户体验,又极大的兼容了原有的PHP体系。
how
-
第一秒,准备原材料
$ npm install dawn -g $ mkdir demo
-
第二秒,初始化应用
// react $ dn init -t react
- 第三秒,多页配置
在./src
中,复制并修改index.js为所需的页面名称。当然也可以不复制不修改,此时就是一个单页面应用。dawn
会自动读取./src
中的js
作为入口(不包括子目录中的js
)
至此,多页面应用已经构建完成
extra
在此基础上,我又进行了一些额外配置
- 状态管理方案参考了这篇 利用Dawn工程化工具实践MobX数据流管理方案,或者可以说因为这篇文章对于
Mobx
的优秀实践,我发现了dawn
这个工具 -
对
webpack
进行高度配置,在./
下新建webpack.config.js
。举个例子:module.exports = function(configs,webpack,ctx){ //configs 为默认配置,可以在这里对其进行修改 //webpack 当前 webpack 实例 //ctx 当前构建「上下文实例」 configs.plugins.push(new webpack.DefinePlugin({ "process.env": { NODE_ENV: JSON.stringify("production") } })); };
-
将入口文件移入新建
./src
下的pages
文件夹,同时在./.dawn/pipe.yml
中修改dev
和build
下的webpack
项entry: ./src/pages/*.js
- 修改
./src/assets/*.html
增加业务所需内容
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。